<template>
  <div>
    <header class="header">
      <h1>TodoList</h1>
    </header>

    <div id="nav">
      <router-link to="/">Home |</router-link>

      <router-link to="/about">About |</router-link>

      <router-link to="/regist" v-if="user_name == ''">
        Regist|
      </router-link>

      <router-link to="/login" v-if="user_name == ''">
        Login
      </router-link>
      <router-link to="/friends" v-if="user_name != ''">
        My Friends |
      </router-link>
      <span v-if="user_name != ''" style="padding-right:2em;">
        Hello, {{ user_name }}
      </span>
      <el-button v-if="user_name != ''" type="warning" @click="logout_now()">
        Logout
      </el-button>
    </div>
  </div>
</template>

<script>
  import { get_user_name } from "../../utils/decode_jwt"
  import { logout } from "../../api/user"
  export default {
    name: "Header",
    computed: {
      user_name: function() {
        return get_user_name()
      },
    },
    methods: {
      logout_now() {
        logout()
      },
    },
  }
</script>

<style scoped>
  .header {
    background: rgba(218, 128, 18, 0.925);
    color: #fff;
    text-align: center;
    padding: 10px;
  }

  .header a {
    color: #fff;
    padding-right: 5px;
  }
  /* #underline{
        text-decoration: none;
    } */
</style>
